<template>
  <div class="container">
    <div class="form">
      <div class="title">城市运营商注册</div>
      <!-- 账号密码注册 -->
      <div class="ipt ipt-phone">
        <input type="text" v-model="phone" placeholder="请输入账号" />
        <div class="rule-tips">字母、数字、下划线组合，4-16位</div>
      </div>
      <div class="ipt ipt-password">
        <input type="password" v-model="password" placeholder="请输入登录密码" />
        <div class="rule-tips">密码必须是字母+数字组合，且不少于8位</div>
      </div>
      <div class="form-btns">
        <div class="form-btn" :class="{'btn-bg': passReg}" @click="register">立即注册</div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { Toast } from 'vant'
import { request, accountReg, passwordReg } from '../../utils'
import { registerUser } from '../../network/user'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      phone: '',
      password: '',
    }
  },
  computed: {
    passReg(){
      return accountReg(this.phone) && passwordReg(this.password)
    },
  },
  methods: {
    register(){
      // 校验手机号
      if(this.phone === ''){
        Toast('请输入账号')
        return false
      }
      if(!accountReg(this.phone)){
        Toast('字母、数字、下划线组成，4-16位')
        return false
      }
      // 校验密码
      if(this.password === ''){
        Toast('请输入密码')
        return false
      }
      if(!passwordReg(this.password)){
        Toast('密码输入错误')
        return false
      }
      // 提交表单
      if(this.passReg)
      {
        this.registerByPhone(() => {
          Toast('注册成功')

          setTimeout(() => {
            this.$router.push({
              path: 'belongApply',
              query: {
                action: 'ISP'
              }
            })
          }, 1000)
          
        })
      }
    },
    
    registerByPhone(cb){
      let phone = this.phone
      let password = this.password
      let parnetId = ''
      let code = 'csyys007titika'
      
      if(phone){
        // 微信用户信息
        let requestDataWx = {
          oauthNickName: '',
          oauthType: '',
          oauthOpenId: '',
          unionid: '',
          sex: '',
          headimgurl: '',
        }
        
        let requestData = {
          userName: phone,
          password,
          code,
          mobile: phone,
          parnetId,
          ...requestDataWx
        }
        registerUser(this, requestData, cb)
      }
    },
  },
}
</script>

<style scoped>
input::placeholder{
  color: #666;
}
.container{
  background: #ffffff;
}
.form{
  padding: 80px 30px 40px 30px;
}
.form .title{
  font-size: 20px;
  line-height: 1.6;
  padding-bottom: 30px;
}
.form .ipt{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.form .ipt input{
  flex-grow: 1;
  height: 50px;
  line-height: 20px;
  font-size: 16px;
  border-bottom: 1px solid #e0e0e0;
}
.form-btn{
  margin-top: 50px;
  font-size: 18px;
  text-align: center;
  line-height: 45px;
  color: #ffffff;
  border-radius: 45px;
  opacity: .2;
  background-color: #d50721;
}
.form-btn.btn-bg{
  opacity: 1;
}
.rule-tips{
  font-size: 14px;
  line-height: 40px;
  color: #ccc;
}
.tips{
  display: block;
  font-size: 16px;
  padding-top: 5px;
  line-height: 3.5;
  color: #0598dd;
  text-align: center;
}
</style>